import { CSSRuleObject, styled } from "styledfc";
import { FlexCss } from "../../../utils/styledfc";
import { AnimalType } from "../index";
interface DescProps {
    item: AnimalType;
}
export default function Desc(props: DescProps) {
    const { item } = props;
    return (
        <div className={descStyle.className}>
            <div className="desc_left">
                <div className="desc__title">{item.name}</div>
                <div className="desc__name">{item.englishName}</div>
                <div className="desc__character">{item.characters}</div>
            </div>
            <div className="desc__life">{item.life}</div>
        </div>
    );
}
const descStyle = styled({
    height: "100rem",
    margin: "20rem 20rem 0",
    ...(FlexCss("center", "space-between") as CSSRuleObject),
    ".desc__title": {
        fontSize: "28rem",
        marginTop: "4rem",
        marginBottom: "10rem",
    },

    ".desc__character,.desc__name,.desc__life": {
        fontSize: "16rem",
        color: "rgba(0, 0, 0, 0.5)",
        lineHeight: "22rem",
    },

    ".desc__life": {
        marginTop: "10rem",
    },
});
